<template>
  <div class="income-box">
    <!-- <van-nav-bar
      title="收支明细"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <van-row class="income-top">
      <van-col span="8">
        <div class="income-top-item" @click="onClickTop(0)">
          <span>收支类型</span>
          <img ref="imgType" src="static/img/income/arrow-off.png" alt="">
        </div>
      </van-col>
      <van-col span="8">
        <div class="income-top-item" @click="onClickTop(1)">
          <span>时间</span>
          <img ref="imgTime" src="static/img/income/arrow-off.png" alt="">
        </div>
      </van-col>
      <van-col span="8">
        <div class="income-top-item" @click="onClickTop(2)">
          <span>金额</span>
          <img ref="imgMoney" src="static/img/income/arrow-off.png" alt="">
        </div>
      </van-col>
    </van-row>

    <div class="income-list">
      <template v-for="item in recordData">
        <van-row class="cell-item">
          <van-col span="6" class="cell-item-left">{{ item.source }}</van-col>
          <van-col span="16" offset="2" class="cell-item-right">
            <span
              class="cell-item-price"
              :style="item.price > 0 ? 'color: red;' : 'color: green;'"
            >{{ item.price > 0 ? '+' + item.price : item.price }}多多币</span>
            <span class="cell-item-date">{{ item.date }}</span>
          </van-col>
        </van-row>
      </template>
    </div>

    <!-- 弹出框-收支类型 -->
    <van-popup
      v-model="showType"
      @click-overlay="onClickPopOverlay"
      position="top"
      class="pop-type"
     >
      <div class="pop-container">
        <div
          class="pop-container-item"
          @click="onClickPopItem('showType', '100以内')"
        >100以内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showType', '100-300')"
        >100-300</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showType', '300以上')"
        >300以上</div>
      </div>
    </van-popup>

    <!-- 弹出框-时间 -->
    <van-popup
      v-model="showTime"
      @click-overlay="onClickPopOverlay"
      position="top"
      class="pop-type"
     >
      <div class="pop-container">
        <div
          class="pop-container-item"
          @click="onClickPopItem('showTime', '3天内')"
        >3天内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showTime', '7天内')"
        >7天内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showTime', '1个月内')"
        >1个月内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showTime', '3个月内')"
        >3个月内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showTime', '半年内')"
        >半年内</div>
      </div>
    </van-popup>

    <!-- 弹出框-金钱 -->
    <van-popup
      v-model="showMoney"
      @click-overlay="onClickPopOverlay"
      position="top"
      class="pop-type"
     >
      <div class="pop-container">
        <div
          class="pop-container-item"
          @click="onClickPopItem('showMoney', '100以内')"
        >100以内</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showMoney', '100-300')"
        >100-300</div>
        <div
          class="pop-container-item"
          @click="onClickPopItem('showMoney', '300以上')"
        >300以上</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon,
    Popup
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
    },
    data() {
      return {
        showType: false,
        showTime: false,
        showMoney: false,
        recordData: [{
          source: '充值收入',
          price: 200,
          date: '2018/06/11'
        }, {
          source: '群收入',
          price: 50,
          date: '2018/06/09'
        }, {
          source: '买群支出',
          price: -50,
          date: '2018/06/08'
        }, {
          source: '买群支出',
          price: 50,
          date: '2018/06/08'
        }, {
          source: '提现支出',
          price: -500,
          date: '2018/06/01'
        }],

      }
    },
    mounted() {

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickTop(index) {
        this.initArrow();
        switch(index) {
          case 0:
            this.showType = !this.showType;
            this.$refs.imgType.src = 'static/img/income/arrow-on.png';
            break;
          case 1:
            this.showTime = !this.showTime;
            this.$refs.imgTime.src = 'static/img/income/arrow-on.png';
            break;
          case 2:
            this.showMoney = !this.showMoney;
            this.$refs.imgMoney.src = 'static/img/income/arrow-on.png';
            break;
        }
      },
      // 点击筛选按钮后
      onClickPopItem(popName, txt) {
        this.initArrow();
      },
      onClickPopOverlay() {
        this.initArrow();
      },
      // 将头部的动画初始化
      initArrow() {
        this.showType = false;
        this.showTime = false;
        this.showMoney = false;
        this.$refs.imgType.src = 'static/img/income/arrow-off.png';
        this.$refs.imgTime.src = 'static/img/income/arrow-off.png';
        this.$refs.imgMoney.src = 'static/img/income/arrow-off.png';
      }
    }
  }
</script>

<style scoped="scoped">
.income-box {
  height: calc(100% - 5px);
  padding-top: 5px;
  background-color: #F7F7F7;
}
.income-list {
  margin-top: 52px;
}
.income-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999999999;
  padding-top: 5px;
  background-color: #F7F7F7;
}
.income-top-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  border-right: 1px solid #F7F7F7;
  border-bottom: 1px solid #F7F7F7;
  padding: 0 20px;
}
.income-top-item span {
  font-size: 14px;
}
.income-top-item img {
  width: 12px;
  height: 8px;
}
.cell-item {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #F0F1F2;

  line-height: 20px;
  color: rgba(3, 3, 3, 1);
  font-size: 14px;
}
.cell-item-right {
  text-align: right;
}
.cell-item-date {
  margin-left: 20px;
  line-height: 20px;
  color: rgba(148, 147, 153, 1);
  font-size: 14px;
}
.pop-type {
  top: 56px;
}
.pop-container-item {
  width: 100%;
  line-height: 40px;
  background-color: #fff;
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid #F7F7F7;
}
</style>